<template> <div class="page-container">
  <div class="common-content">
  <!-- 列表搜索条件部分 label宽度要固定,优先展示输入框和下拉框 ;时间选择和地区选择放置在最后,因为后两个的尺寸表较大,换行后会导致整体对不齐 -->
   <div class="search-wrap">
    <el-form :inline='true' :model="searchFilters" :size="searchSize" ref="searchFilters" label-position="right" >
      <el-row class="search-input">
     <el-form-item label="订单金额（RMB）：">
      <el-input v-model="searchFilters.orderAmount" placeholder="请输入订单金额（RMB）"></el-input>
     </el-form-item>
     <el-form-item label="采购组织：">
      <el-input v-model="searchFilters.purchaseOrganization" placeholder="请输入采购组织"></el-input>
     </el-form-item>
     <el-form-item label="交货地址：">
      <el-input v-model="searchFilters.addres" placeholder="请输入交货地址"></el-input>
     </el-form-item>
     <el-form-item label="我方联系人：">
      <el-input v-model="searchFilters.myContacts" placeholder="请输入我方联系人"></el-input>
     </el-form-item>
     <el-form-item label="预约交货日期：">
      <el-input v-model="searchFilters.appointmentDeliveryDate" placeholder="请输入预约交货日期"></el-input>
     </el-form-item>
     <el-form-item label="预计送达时间：" label-width="141px">
      <el-input v-model="searchFilters.appointmentDeliverTime" placeholder="请输入预计送达时间"></el-input>
     </el-form-item>

     <el-form-item label="更新日期：">
      <el-input v-model="searchFilters.updateTime" placeholder="请输入更新日期"></el-input>
     </el-form-item>
     <el-form-item label="更新人：" label-width="82px">
      <el-input v-model="searchFilters.updator" placeholder="请输入更新人"></el-input>
     </el-form-item>
     </el-row>
      <!-- 搜索区域按钮-查询,重置 -->
      <div class="tool-wrap">
       <el-row class="search-button">
         <el-form-item>
          <el-button type="primary" size="small" @click="findPage()" icon="el-icon-search">查询</el-button>
         </el-form-item>
         <el-form-item>
          <el-button type="primary" size="small" @click="resetForm()" icon="el-icon-refresh">重置</el-button>
         </el-form-item>
         <el-form-item>
          <el-button type="primary" size="small" @click="addForm()" icon="el-icon-plus">新增</el-button>
         </el-form-item>
       </el-row>
      </div>
      <!-- 表格数据部分 -->
      <div class="table-wrap">
       <jic-table
          :height="350"
          :operationWidth=200
          :tableList="tableList"
          :tableHeaderList="tableHeaderList"
          :totalSize="totalSize"
          :showDetailOperation=true
          :showEditOperation=true
          :showBatchDelete=false
          :showSelection=false
          :showIndex=false
          @findPage="findPage"
          @handleDetail="handleDetail"
          @handleEdit="handleEdit"
          @handleSizeChange="handleSizeChange"
          @handlePageChange="handlePageChange"
          ref="jicTable"
        ></jic-table>
      </div>
</el-form>
    </div>
   </div>
</div>
</template>
<script>
//一.导包区
import jicTable from '@/components/jicComponentGallery/jicTable';

//二.数据输出区
export default {

//2.1 注册组件
components: {
 jicTable,
},

//2.2 数据初始化区
data() { return {

  //2.2.1 公共数据初始化
pageIndex:0,
pageSize:10,
totalSize:0,//// 返回数据总条数
pageRequest: {pageNum: 1, pageSize: 10},     // 请求数据的参数
tableList: [],                               // 表格列表数据
searchSize: 'mini',

// 2.2.2 表格表头数据
tableHeaderList: [
{prop: "purchaseVoucherNo", label: "采购凭证号", minWidth: 100,formatter:null},
{prop: "supplierName", label: "供应商名称", minWidth: 100,formatter:null},
{prop: "supplierCode", label: "供应商编号", minWidth: 100,formatter:null},
{prop: "deviceDemandId", label: "设备号需求标识", minWidth: 100,formatter:null},
{prop: "appointmentDeliveryDate", label: "预约交货日期", minWidth: 100,formatter:null},
{prop: "appointmentDeliverTime", label: "预计送达时间", minWidth: 100,formatter:null},
{prop: "actualDeliveryDate", label: "实际交货日期", minWidth: 100,formatter:null},
{prop: "notDeliver24hReason", label: "24小时未发货原因", minWidth: 100,formatter:null},
{prop: "orderOverdueReason", label: "订单逾期原因", minWidth: 100,formatter:null},
{prop: "deptId", label: "运营方ID", minWidth: 100,formatter:null},
],// 2.2.3 搜索表单对应的数据对象初始化
searchFilters: {
 id:null,
 purchaseVoucherNo:null,
 supplierName:null,
 supplierCode:null,
 deviceDemandId:null,
 purchaseVoucherType:null,
 demandType:null,
 orderAmount:null,
 purchaseOrganization:null,
 addres:null,
 myContacts:null,
 appointmentDeliveryDate:null,
 appointmentDeliverTime:null,
 actualDeliveryDate:null,
 deliverStatus:null,
 notDeliver24hReason:null,
 orderOverdueReason:null,
 orderStatus:null,
 deptId:null,
 merchantId:null,
 merchantName:null,
 storeId:null,
 storeName:null,
 createTime:null,
 creator:null,
 updateTime:null,
 updator:null,
 deleteFlag:null,
},
//dialogVisible: false, //// 是否显示弹窗内容;
//editDialogVisible1: false,//// 是否可编辑弹窗内容;
//editLoading: false,////是否显示加载时动画效果;
}//return 完结;
},//data()方法 完结;

  //2.3 JavaScript 方法区
methods: {
  //2.3.1 JavaScript 公共方法区

  //2.请求列表数据
findPage(pageNum) {
      // 传过滤器的参数
  let this_ = this;
  if (this_.searchFilters === undefined || this_.searchFilters === null) {
    this_.searchFilters = {};
  }

   this_.searchFilters.pageNum = pageNum === null || pageNum === undefined ? this.pageRequest.pageNum : pageNum;
   this_.searchFilters.pageSize = this.pageRequest.pageSize;
   this.utils.request.findDirectDeliveryOrderManagePage(this_.searchFilters, function (res) {
   if (res.code === "0000") {
     this_.tableList = res.data.rows;
     this_.totalSize = Number(res.data.total);
   } else {
      this_.tableList = [];
      this_.totalSize = 0;
  }
  });
},

// 3.重置搜索框条件
resetForm(formName) {
 this.searchFilters = {
};
 this.findPage(null);
},

// 4.详情按钮对应的方法(TODO 需要修改路径)
handleDetail(params) {
 this.$router.push({path: "/getDirectDeliveryOrderManageDetail/" + params.row.id});
},

// 4.详情按钮对应的方法(TODO 需要修改路径)
handleEdit(params) {
 this.$router.push({path: "/getDirectDeliveryOrderManageDetail/" + params.row.id});
},

addForm(params) {
 params =null;this.$router.push({path: "/getDirectDeliveryOrderManageDetail/" + params});
},
// 5.请求条数发生变化
handleSizeChange(params) {
 this.pageRequest.pageSize = params.size;
},

// 6.请求页数发生变化
handlePageChange(params) {
this.pageRequest.pageNum = params.number;
this.findPage();
},
// 7.页面弹窗处理方法
add() {
this.dialogVisible = true;
},

// 8.关闭弹窗
handleClose() {
this.dialogVisible = false;
},

//==========2.3.1 JavaScript 自定义方法区==========





},
//1.初始化页面调用方法(dom元素绑定后再执行初始化数据操作)
mounted() {
 this.findPage();
},

}
</script>
<style lang="scss" scoped>
</style>
